// // 1- 定义src->store->modules->counter.ts
// import {defineStore} from "pinia";
// // 通过defineStore可以定义小仓库（模块）
// // defineStore返回的值一般保存至以use开头的常量中。
// // 第一个参数是模块的标识,第二个参数是配置对象
// const useCounterStore = defineStore("counter",{
//     // 通过state函数可以定义状态，返回的值即是该模块中的数据状态。
//     // state(){
//     //     return {
//     //         num:100
//     //     }
//     // }
//     // 上方代码也可以写为：
//     state:()=>({
//         num:200,
//         arr:[1,2,3,4,5]
//     })
// });
// // 在组件可以通过运行useCounterStore函数操作该模块中的数据状态。
// export default useCounterStore;
//
// // 2- 使用 src->App.vue
// <template>
//     <h3>练习Pinia</h3>
//     <p>counter:{{counter}}</p>
//     <p>counter.$id:{{counter.$id}}</p>
//     <p>num:{{counter.num}}</p>
//     <p>arr:{{counter.arr}}</p>
//     <p>_isOptionsAPI:{{counter._isOptionsAPI}}</p>
// </template>
//
// <script lang="ts" setup>
//     import useCounterStore from "@/store/modules/counter";
//     const counter = useCounterStore();
//     // 输出counter模块中的数据状态num
//     // console.log(counter.num);
//     console.log(counter)
// </script>
//
// // ================================== actions
// import {defineStore} from "pinia";
// // 通过defineStore可以定义小仓库（模块）
// // defineStore返回的值一般保存至以use开头的常量中。
// // 第一个参数是模块的标识,第二个参数是配置对象
// const useCounterStore = defineStore("counter",{
//     // 通过state函数可以定义状态，返回的值即是该模块中的数据状态。
//     // state(){
//     //     return {
//     //         num:100
//     //     }
//     // }
//     // 上方代码也可以写为：
//     state:()=>({
//         num:200,
//         arr:[1,2,3,4,5]
//     }),
//     // 1
//     actions:{
//         addOne(a:number,b:number,c:number,d:number){
//             console.log(a,b,c,d);
//             this.num+=1;
//         },
//         delaySet(){
//             setTimeout(()=>{
//                 this.num=900
//             },2000)
//         }
//     }
// });
// // 在组件可以通过运行useCounterStore函数操作该模块中的数据状态。
// export default useCounterStore;
//
// // 使用actions
// <template>
//     <h3>练习Pinia</h3>
//     <p>counter:{{counter}}</p>
//     <p>模块的标识->counter.$id:{{counter.$id}}</p>
//     <hr/>
//     <h3>数据状态</h3>
//     <p>num:{{counter.num}}</p>
//     <p>arr:{{counter.arr}}</p>
//     <hr/>
//     <h3>是否使用了组合式API</h3>
//     <p>_isOptionsAPI:{{counter._isOptionsAPI}}</p>
//     <hr/>
//     <h3>支持双向绑定</h3>
//     <input type="text" v-model.number="counter.num">
//         <hr/>
//         <h3>更改数据状态方案一：直接修改</h3>
//         <button @click="counter.num++">{{counter.num}}</button>
//     <hr/>
//     <h3>更改数据状态方案二：借助counter.$patch</h3>
//     <button @click="setNum">{{counter.num}}</button>
// <hr/>
// <h3>更改数据状态方案三：actions</h3>
// <button @click="counter.addOne">{{counter.num}}</button>
// <button @click="counter.addOne(1,2,3,4)">{{counter.num}}</button>
// <button @click="actionAddOne">{{counter.num}}</button>
// <button @click="counter.delaySet">异步更新{{counter.num}}</button>
// </template>
//
// <script lang="ts" setup>
//     import useCounterStore from "@/store/modules/counter";
//     const counter = useCounterStore();
//     // 输出counter模块中的数据状态num
//     // console.log(counter.num);
//     // console.log(counter)
//     const setNum = function(){
//     // counter.num+=2;
//
//     // counter.$patch({
//     //     num:counter.num+3
//     // })
//
//     const num = counter.num+3;
//     // $patch接收一个对象，对象的属性名即是要修改的状态名，对应的属性值即是要修改的状态值。
//     counter.$patch({
//     num
// })
// }
//     const actionAddOne = function(){
//     counter.addOne(10,11,12,13);
// }
// </script>
//
//
// // ================================== getters
// getters:{
//     sum(){
//         console.log("sum");
//         const value:number = this.arr.reduce((s:number,item:number)=>{
//             return s+item;
//         },0)
//         return value;
//     }
// }
//
// // 使用
// <template>
//     <p @click="counter.changeArr">getters->sum:{{counter.sum}}</p>
// </template>